<template>
	<view class="">

		<view v-if="navData==[]">
			<xbd-zwnz></xbd-zwnz>
		</view>
		<view v-else class="important">
			<view class="head">
				<custom-tabs type="c1" :value="tabvalue" @change="changeIndex">
					<custom-tab-pane v-for="(item,index) in navData" :key='index' :label="item.title"
						:name="'c1_'+item.id">
					</custom-tab-pane>
				</custom-tabs>
			</view>
			<xbd-select :carId.sync="type" :option.sync="option" :visible.sync="visible" :infoList="infoList">
				<template>
					<view class="select" @click="visible = true">
						<view class="text">
							{{ type  }}
						</view>
						<image class="image" src="@/static/image/down.svg">
						</image>
					</view>
				</template>
			</xbd-select>
			<view v-if="infoList== [] || showDetail == ''">
				<xbd-zwnz></xbd-zwnz>
			</view>
			<view v-else>
				<view class="image">
					<title :txt="'廉洁风险点标识图'" />
					<view class="img">
						<image @click="image_click(showDetail.risk_identity)" :src="showDetail.risk_identity" />
					</view>
				</view>
				<view class="step">
					<title :txt="'廉洁风险识别、评估及防控措施'" />
					<view v-if="showDetail.defense_step!==[]">
						<xbd-step-card v-for="(item,index) in showDetail.defense_step" :key="index" :myInfo='item'>
						</xbd-step-card>
					</view>
					<!-- 暂无数据 -->
					<xbd-zwnz v-else></xbd-zwnz>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import title from "@/components/iconTitle.vue";
	import {
		Identify
	} from '@/api/index.js';
	export default {
		name: "important",
		components: {
			title,
		},

		data() {
			return {
				navData: [],
				visible: false,
				tabvalue: 0,
				title: "请选择",
				type: "请选择",
				option: '',
				infoId: '',
				showDetail:'',
				infoList: [],
			};
		},
		watch: {
			type(newval, old) {
				this.getdetail()
			}
		},
		methods: {
			image_click(image) {
				dd.previewImage({
					current: 1,
					urls: [image],
				});
			},
			changeIndex(e) {
				this.showDetail=''
				this.infoId = e.name.slice(3)
				this.getInfoList()
			},
			async getdetail() {
				const res = await Identify.identifyWorkDetail(this.option)
				if(this.infoList.length !== 0){
					if(res.success ){
						this.showDetail = res.data
					}else{
						this.showDetail = ''
						this.$showToast(res.msg);
					}
				}
				console.log(this.showDetail.defense_step.length)
			},
			async getInfoList() {
				const res = await Identify.identifyFieldDetail(this.infoId)
				if(res.success){
					this.infoList = res.data.work_name
				}else{
					this.infoList = []
					this.$showToast(res.msg);
				}
				console.log(res,'res')
				if (this.infoList.length !== 0) {
					this.type = this.infoList[0].label
					this.option = this.infoList[0].value
				}else{
					this.type = '请选择'
				}
			},
			async init() {
				const res = await Identify.identifyField();
				this.navData = []
				this.infoId = res.data.list[0]._id
				this.navData = res.data.list.map(item => {
					let a = {
						title: item.field_name,
						id: item._id
					}
					return a
				})
				this.getInfoList()
			},

		},
		async onLoad() {
			await this.init()
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .tab-cont {
		padding: 0 !important;
	}

	@import "@/static/common.scss";

	.important {
		@include compress;

		.head {
			width: 750rpx;
			background-color: #fff;
			position: fixed;
			padding: 20rpx 0;
			top: 0;
			left: 0;
		}

		.select {

			margin: 110rpx 0 50rpx;
			width: 100%;
			line-height: 72rpx;
			font-size: 30rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			color: #8890a5;

			image {
				width: 28rpx;
				height: 30rpx;
			}
		}

		.image {
			width: 100%;

			.img {
				margin: 30rpx 0 50rpx 0;
				height: 600rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 35rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.step {}
	}
</style>
